<template>
  <el-drawer v-model="drawer" :with-header="false" :size="pageSize" ref="drawerRef" :append-to-body="true" width="730px" @close="close" class="purchase-detail">
    <div class="active-detail-content">
      <div class="header-content">
        <h3 class="active-title">合同/订单详情
          <el-button v-if="isEdit && form.source != '0'" type="primary" :icon="Edit" style="margin-left: 100px" text size="small" @click="isEdit = false">编辑</el-button>
          <el-button v-if="!isEdit && form.source != '0'" type="warning" style="margin-left: 100px" :icon="Check" size="small" @click="saveDetail">保存</el-button>
        </h3>
        <el-row justify="center" style="margin: 15px 0">
          <div class="tips-cell">
            <span class="tips">合同/订单编号</span>
            <span class="tips-data">{{ form.orderNo }}</span>
          </div>
          <div class="tips-cell">
            <span class="tips">下单日期</span>
            <el-date-picker style="width:120px;" v-model="form.orderDate" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                            type="date" placeholder="下单时间" size="small" :disabled="isEdit"/>
          </div>
          <div class="tips-cell">
            <span class="tips">供应商</span>
            <el-select v-model="form.supplierInfoId" placeholder="请选择供应商" style="width:120px;" size="small" filterable :disabled="isEdit">
              <el-option v-for="item in state.supplierList" :key="item.supplierInfoId" :label="item.shortName" :value="item.supplierInfoId"/>
            </el-select>
          </div>
          <div class="tips-cell">
            <span class="tips">采购人</span>
            <el-select v-model="form.purchaseUserId" placeholder="请选择采购人" style="width:120px;" size="small" :disabled="isEdit">
              <el-option v-for="item in state.purchaseUsers" :key="item.userId" :label="item.nickname" :value="item.userId"/>
            </el-select>
          </div>
          <div class="tips-cell">
            <span class="tips">订单来源</span>
            <el-select v-model="form.source" placeholder="订单来源" style="width:120px;" size="small" :disabled="isEdit">
              <el-option v-for="item in dictMap['orderSourceType']" :key="item.value" :label="item.name" :value="item.value"></el-option>
            </el-select>
          </div>
          <div class="tips-cell">
            <span class="tips">订单类型</span>
            <el-select v-model="form.type" placeholder="订单类型" style="width:120px;" size="small" :disabled="isEdit">
              <el-option label="个人" :value="0"/>
              <el-option label="企业" :value="1"/>
            </el-select>
          </div>
        </el-row>
      </div>

      <el-card class="header-button">
        <el-row justify="center" align="middle">
          <div class="button-item" v-if="form.stage == '6'">审批</div>
          <div class="button-item" @click="cancelOrder">订单取消</div>
          <div class="button-item" v-if="form.stage == '3' || form.stage == '10'">售后</div>
          <div class="button-item" v-if="form.stage == '0'">付款</div>
          <div class="button-item" @click="openMaterial('doc')">
            <el-icon color="var(--next-bg-menuBar-light-1)" size="16px">
              <ele-Document/>
            </el-icon>
            <span class="tips">文档</span>
            <span>12</span>
          </div>
          <div class="button-item" @click="openMaterial('file')">
            <el-icon color="var(--next-bg-menuBar-light-1)" size="16px">
              <ele-Link/>
            </el-icon>
            <span class="tips">附件</span>
            <span>3</span>
          </div>
        </el-row>
      </el-card>

      <el-card class="stage-card" style="margin-bottom: 3px">
        <el-row align="middle" justify="center" class="stage-row">
          <el-col :span="2" class="stage-tip">订单阶段</el-col>
          <el-col :span="13" style="height: 100%">
            <tree-line :data="state.stageLine" :active="state.lineStage" @getItem="toStage"/>
          </el-col>
          <el-col :span="9" style="height: 100%;text-align: right">
            <el-row align="middle" justify="center" class="single-stage">
              <el-col
                  :span="6"
                  v-for="item in state.singleStageList"
                  :key="item.value"
                  @click="toStage(item)"
                  :style="form.stage == item.value ? 'color: #E6A23C' : ''">
                {{ item.time }}
              </el-col>
            </el-row>
            <el-row align="middle" justify="center" class="single-stage">
              <el-col
                  :span="6"
                  v-for="item in state.singleStageList"
                  :key="item.value"
                  @click="toStage(item)"
                  :style="form.stage == item.value ? 'color: #E6A23C' : ''">
                {{ item.label }}
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-card>

      <el-row>
        <el-col :span="6">
          <el-card :body-style="{ padding: `8px 10px` }" style="margin-right:10px;height: 100%" shadow="hover">
            <el-row align="middle" class="row-cell" style="justify-content: center;">
              <label class="label-tips">订单辅助信息</label>
            </el-row>
            <el-row align="middle" class="row-cell">
              <label class="label-tips">订单/合同编号</label>
              <div>{{ form.orderNo }}</div>
            </el-row>
            <el-row align="middle" class="row-cell">
              <label class="label-tips">供应商简称</label>
              <div>{{ form.shortName }}</div>
            </el-row>
            <el-row align="middle" class="row-cell">
              <label class="label-tips">经办人</label>
              <div>{{ state.contactName }}</div>
            </el-row>
            <el-row align="middle" class="row-cell">
              <label class="label-tips">联系电话</label>
              <div>{{ form.handlerPhone }}</div>
            </el-row>
            <el-row align="middle" class="row-cell">
              <label class="label-tips">结款方式</label>
              <el-row align="middle">
                <el-select v-model="form.paymentType" placeholder="请选择结款方式" style="width:140px;margin-right: 20px;" size="small" :disabled="isEdit">
                  <el-option v-for="item in dictMap['PaymentType']" :key="item.value" :label="item.name" :value="item.value"/>
                </el-select>
              </el-row>
            </el-row>
            <el-row align="middle" class="row-cell">
              <label class="label-tips">预计交货日期</label>
              <el-row align="middle">
                <el-date-picker style="width:150px;margin-right: 50px;" v-model="form.predictDeliverDate" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                                type="date" placeholder="请选择日期" size="small" :disabled="isEdit"/>
              </el-row>
            </el-row>
          </el-card>
        </el-col>

        <el-col :span="18">
          <el-card style="flex:1" :body-style="{ padding: `12px 0` }">
            <el-row justify="space-between" align="middle" style="padding:0 10px">
              <h4>产品清单</h4>
              <el-row justify="end">
                <el-button size="small" type="warning" @click="printData">
                  <el-icon>
                    <ele-Printer/>
                  </el-icon>
                  打印
                </el-button>
                <el-button v-if="form.source != '0'" size="small" type="primary" @click="editProducts">
                  <el-icon>
                    <ele-EditPen/>
                  </el-icon>
                  编辑
                </el-button>
              </el-row>
            </el-row>
            <div class="page-content" id="pageContainer">
              <el-form ref="ruleRefForm" size="small" :model="form" label-width="120px" label-position="right" style="border: 1px solid var(--el-border-color-light)">
                <el-table :data="form.productItems" size="small" :header-cell-style="{textAlign: 'center'}" :cell-style="{textAlign: 'center'}">
                  <el-table-column label="产品编号" prop="id" width="160"/>
                  <el-table-column label="产品名称" prop="name" width="120"/>
                  <el-table-column label="数量" prop="num" width="90"/>
                  <el-table-column label="单价(元)" prop="price" width="90"/>
                  <el-table-column label="总价(元)" prop="total" width="90"/>
                  <el-table-column label="规格/详情" prop="specification"/>
                </el-table>
                <el-form-item label="合计" style="margin-bottom:0;border-bottom:1px solid var(--el-border-color-light);font-size:14px;color:var(--el-color-danger)">{{ form.productAmountSum || '-' }}</el-form-item>
                <el-form-item label="大写" style="margin-bottom:0;border-bottom:1px solid var(--el-border-color-light);font-weight:bold;font-size:14px;">{{ toChinese(form.productAmountSum || 0) }}</el-form-item>
                <el-form-item label="合同条款" style="margin-bottom:0;border-bottom:1px solid var(--el-border-color-light)">
                  <div v-html="form.replenishInstruction || '-'"/>
                </el-form-item>
                <el-form-item label="备注" style="margin-bottom:0;">{{ form.note || '-' }}</el-form-item>
              </el-form>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <el-row>
        <el-divider>历史记录</el-divider>
      </el-row>

      <el-row style="margin-top: 10px">
        <el-card :body-style="{ padding: `8px 10px` }" style="width: 100%" shadow="hover">
          <label>发货记录</label>
          <el-table size="small" :data="state.deliveryRecords" border style="margin-top:10px">
            <el-table-column label="发货日期" align="center" prop=""></el-table-column>
            <el-table-column label="产品名称" align="center" prop=""></el-table-column>
            <el-table-column label="详情/规格" align="center" prop=""></el-table-column>
            <el-table-column label="实发数量" align="center" prop=""></el-table-column>
            <el-table-column label="发货人" align="center" prop=""></el-table-column>
            <el-table-column label="发货单号" align="center" prop=""></el-table-column>
            <el-table-column label="物流公司" align="center" prop=""></el-table-column>
            <el-table-column label="签收情况" align="center" prop=""></el-table-column>
          </el-table>
        </el-card>
      </el-row>

      <el-row style="margin-top: 10px">
        <el-card :body-style="{ padding: `8px 10px` }" style="width: 100%" shadow="hover">
          <label>付款记录</label>
          <el-table size="small" :data="state.paymentRecords" border style="margin-top:10px">
            <el-table-column label="回款日期" align="center" prop=""></el-table-column>
            <el-table-column label="回款金额（元）" align="center" prop=""></el-table-column>
            <el-table-column label="备注" align="center" prop=""></el-table-column>
          </el-table>
        </el-card>
      </el-row>

      <el-row style="margin-top: 10px">
        <el-card :body-style="{ padding: `8px 10px` }" style="width: 100%" shadow="hover">
          <label>售后记录</label>
          <el-table size="small" :data="state.afterSaleRecords" border style="margin-top:10px">
            <el-table-column label="售后日期" align="center" prop=""/>
            <el-table-column label="售后类型" align="center" prop=""/>
            <el-table-column label="售后原因" align="center" prop=""/>
            <el-table-column label="处理方式" align="center" prop=""/>
            <el-table-column label="完结日期" align="center" prop=""/>
          </el-table>
        </el-card>
      </el-row>

    </div>

    <div class="tabs-list">
      <div class="close-btn" @click="drawer = false">
        <el-icon color="var(--next-color-white)" size="28px">
          <ele-CircleClose/>
        </el-icon>
      </div>
    </div>

    <el-dialog title="产品清单" v-model="state.productVisible" :close-on-click-modal="false" destroy-on-close width="65%" @close="state.productVisible = false">
      <el-table :data="state.productsForm.productItems" stripe border :cell-style="{textAlign: 'center'}" :header-cell-style="{
        textAlign: 'center',
        background: 'var(--el-color-primary-light-9)',
        color: 'var(--next-bg-menuBar-light-1)',
        border: '1px solid var(--el-table-border-color)'}">
        <el-table-column label="产品名称">
          <template v-slot="{row}">
            <el-input size="small" v-model="row.name" maxlength="64" clearable/>
          </template>
        </el-table-column>
        <el-table-column label="型号">
          <template v-slot="{row}">
            <el-input size="small" v-model="row.ver" maxlength="64" clearable/>
          </template>
        </el-table-column>
        <el-table-column label="规格/详情">
          <template v-slot="{row}">
            <el-input size="small" v-model="row.specification" maxlength="64" clearable/>
          </template>
        </el-table-column>
        <el-table-column label="数量" width="130">
          <template v-slot="{row}">
            <el-input-number size="small" v-model="row.num" :min="0" :max="999999" :controls="false" style="width: 90px" @change="calAmount(row)"/>
          </template>
        </el-table-column>
        <el-table-column label="价格" width="130" prop="price">
          <template v-slot="{row}">
            <el-input-number size="small" v-model="row.price" :min="0" :max="999999" :controls="false" :precision="2" style="width: 90px" @change="calAmount(row)"/>
          </template>
        </el-table-column>
        <el-table-column label="小计" width="140" prop="total">
          <template v-slot="{row}">{{ row.total || 0.00 }}</template>
        </el-table-column>
        <!--        <el-table-column label="发货方式">-->
        <!--          <template v-slot="{row}">-->
        <!--            <el-select v-model="row.deliveryType" size="small" clearable filterable>-->
        <!--              <el-option v-for="item in dictMap['DeliveryType']" :label="item.name" :key="item.value" :value="item.value"/>-->
        <!--            </el-select>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column label="操作" width="90">
          <template v-slot="{$index, row}">
            <el-button type="danger" :icon="Delete" text @click="removeProduct($index, row)">移除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row align="middle" style="margin-top: 5px;width: 100%">
        <el-col :span="3" :offset="1">
          <el-button type="primary" :icon="Plus" @click="addProduct" text>添加</el-button>
        </el-col>
        <el-col :span="4">合计：{{ state.productsForm.productAmountSum }} 元</el-col>
        <el-col :span="4">大写：{{ state.cnAmount }}</el-col>
      </el-row>
      <template #footer>
          <span class="dialog-footer">
            <el-button size="small" @click="state.productVisible = false">关闭</el-button>
            <el-button size="small" type="primary" @click="saveProduct">保存</el-button>
          </span>
      </template>
    </el-dialog>
  </el-drawer>
</template>

<script setup>
import {computed, reactive, toRefs, watch, onMounted, ref} from 'vue'
import {Edit, Check, Plus, Delete} from '@element-plus/icons-vue'
import {getSupplierSelector} from '/@/api/supplier'
import {getEnterpriseUsers} from '/@/api/sys/user'
import {numToChinese} from '/@/utils/common'
import supplierContact from '/@/api/supplier/supplierContact'
import purchaseOrderApi from '/@/api/supplier/purchaseOrder'
import TreeLine from '/@/components/treeLine/index.vue'
import {ElMessage} from 'element-plus'

let isEdit = ref(true)
const state = reactive({
  contactName: '',  // 供应商联系人名称
  supplierList: [],   // 供应商列表
  purchaseUsers: [],   // 采购人列表
  paymentRecords: [],   // 付款记录列表
  afterSaleRecords: [], // 售后记录列表
  deliveryRecords: [],  // 发货记录列表
  stageLine: {
    common: [
      {
        label: '待审批',
        time: '',
        value: '6'
      }, {
        label: '已审批',
        time: '',
        value: '7'
      }, {
        label: '待付款',
        time: '',
        value: '0'
      }, {
        label: '待发货',
        time: '',
        value: '1'
      }, {
        label: '已发货',
        time: '',
        value: '2'
      }, {
        label: '已完成',
        time: '',
        value: '3'
      }
    ]
  },
  lineStage: '',    // 进度条上的阶段, 用来选择非进度条阶段时进度条的保留
  singleStageList: [  // 无进度条的阶段
    {
      label: '重发补发',
      time: '',
      value: '11'
    }, {
      label: '待退货',
      time: '',
      value: '9'
    }, {
      label: '已退货',
      time: '',
      value: '12'
    }, {
      label: '已取消',
      time: '',
      value: '4'
    }
  ],
  productVisible: false,  // 编辑清单对话框
  cnAmount: '', // 大写金额
  productsForm: {   // 编辑的表单对象
    id: null,
    productAmountSum: null,
    productItems: []
  },
  tempId: 0  // 临时id, 打开产品清单编辑框重置
})
let pageSize = ref('85%')
const props = defineProps({
  dialogDrawer: {
    props: Boolean,
    default: false
  },
  form: {
    type: Object,
    default: {}
  },
  dictMap: {
    type: Object,
    default: {}
  }
})
const emit = defineEmits(['onSubmit', 'update:dialogDrawer'])
const {dialogDrawer, form, dictMap} = toRefs(props)
let drawer = computed({
  get: () => {
    if (dialogDrawer.value) {
      // 获取经办人名称
      supplierContact.getContact(form.value.handlerId).then(res => state.contactName = res.data.name).catch(e => console.log(e))
      // 供应商列表
      getSupplierSelector().then(res => state.supplierList = res.data).catch(e => console.log(e))
      // 企业用户列表
      getEnterpriseUsers().then(res => state.purchaseUsers = res.data).catch(e => console.log(e))
      purchaseOrderApi.getStageRecord(form.value.id).then(res => {
        if (res.data) {
          if (res.data['recentLine']) {   // 最后一次进度条阶段
            state.lineStage = res.data['recentLine'].stage
          }
          state.stageLine.common.forEach(stage => stage.time = res.data[stage.value] ? res.data[stage.value]['stageTime'].substring(0, 10) : '')
          state.singleStageList.forEach(stage => stage.time = res.data[stage.value] ? res.data[stage.value]['stageTime'].substring(0, 10) : '')
        }
      }).catch(e => console.log(e))
    }
    return dialogDrawer.value
  },
  set: val => {
    emit('update:dialogDrawer', val)
  }
})

const close = () => {
  emit('update:dialogDrawer', false)
}
// 阿拉伯数字转大写
const toChinese = (num) => {
  return numToChinese(num)
}
// 打开编辑采购单的清单
const editProducts = () => {
  state.productsForm = {
    id: form.value.id,
    productAmountSum: form.value.productAmountSum,
    productItems: Object.assign([], form.value.productItems)
  }
  state.tempId = 0
  state.cnAmount = toChinese(form.value.productAmountSum)
  state.productVisible = true
}

const getSize = () => {
  if (document.body.clientWidth <= 1400) {
    return '1220px'
  } else {
    return '85%'
  }
}
// 打开文档弹框
const openMaterial = (type) => {

}
//保存订单详情页
const saveDetail = () => {
  const params = Object.assign({}, form.value)
  params.productItems = null
  purchaseOrderApi.editOrder(params).then(res => {
    if (res.data) {
      emit('onSubmit')
      ElMessage.success('保存成功！')
      isEdit.value = true
    }
  }).catch(e => console.log(e))
}
// 打印数据
const printData = () => {

}
// 添加产品清单行
const addProduct = () => {
  state.productsForm.productItems.push({
    id: null,
    tempId: state.tempId++,
    name: null,
    ver: null,
    specification: null,
    num: 0,
    price: 0,
    total: 0,
    deliveryType: null,
    remark: null
  })
}
// 移除产品行
const removeProduct = (index, product) => {
  state.formData.productItems.splice(index, 1)
  state.formData.productAmountSum -= product.total
}
// 计算产品小计
const calAmount = (product) => {
  let total = 0
  product.total = ((product.num || 0) * (product.price || 0)).toFixed(2)
  state.productsForm.productItems.forEach(item => total += (item.num || 0) * (item.price || 0))
  state.productsForm.productAmountSum = total.toFixed(2)
  state.cnAmount = numToChinese(state.productsForm.productAmountSum)
}
// 保存产品清单
const saveProduct = () => {
  const params = state.productsForm
  let tip = ''
  for (let i = 0; i < params.productItems.length; i++) {
    let item = params.productItems[i]
    if (!item.name) {   // 产品名称为空
      tip = '请填写第 ' + (i + 1) + ' 行的产品名称！'
      break
    }
  }
  if (tip) {
    ElMessage.error(tip)
    return
  }
  purchaseOrderApi.editOrder(params).then(res => {
    if (res.data) {
      emit('onSubmit')
      state.productVisible = false
      form.value.productItems = res.data.productItems
      form.value.productAmountSum = res.data.productAmountSum
      state.productsForm = {
        id: null,
        productAmountSum: 0,
        productItems: []
      }
      state.cnAmount = ''
      ElMessage.success('修改成功！')
    }
  }).catch(e => console.log(e))
}
// 修改阶段
const toStage = (stage) => {
  purchaseOrderApi.modifyStage({
    id: form.value.id,
    stage: stage.value
  }).then(res => {
    if (res.data) {
      emit('onSubmit')
      form.value.stage = stage.value
      let flag = true
      for (let i = 0; i < state.stageLine.common.length; i++) {
        let stageItem = state.stageLine.common[i]
        if (stageItem.value == stage.value) {
          // data返回阶段记录时间
          stageItem.time = res.data
          state.lineStage = stage.value
          flag = false
          break
        }
      }
      if (flag) {
        for (let i = 0; i < state.singleStageList.length; i++) {
          let stageItem = state.singleStageList[i]
          if (stageItem.value == stage.value) {
            stageItem.time = res.data
            break
          }
        }
      }
    }
  }).catch(e => console.log(e))
}
// 取消订单
const cancelOrder = () => {

}

watch(() => dialogDrawer.value, val => {
  emit('update:dialogDrawer', val)
  if (val) {
    // 初始化逻辑
    pageSize.value = getSize() // modal 尺寸
  } else {
    // 销毁
  }
})

onMounted(() => {
  window.onresize = () => {
    pageSize.value = getSize()
  }
})


</script>

<style lang="scss" scoped>
.active-detail-content {
  padding: 10px;
  background: var(--next-bg-main-color);
  min-height: 100%;

  .header-content {
    .active-title {
      text-align: center;
      font-size: 18px;
      color: var(--next-bg-menuBar-light-1);
    }

    .tips-cell {
      margin-right: 15px;
      font-size: 13px;
      display: flex;
      align-items: center;
      position: relative;
      padding-right: 15px;

      &::after {
        content: "";
        position: absolute;
        right: 0;
        top: 3px;
        bottom: 3px;
        border-right: 1px solid var(--next-bg-menuBarColor);
      }

      &:last-child {
        padding-right: 0;
        margin-right: 0;

        &::after {
          display: none;
        }
      }

      .tips {
        color: var(--el-color-info);
        margin-right: 5px;
        line-height: 17px;
      }

      .tips-data {
        font-size: 13px;
        line-height: 17px;
      }
    }
  }

  .stage-card {
    height: 70px;

    :deep(.el-card__body) {
      padding: 10px 15px;
      height: 100%;
    }

    .stage-row {
      height: 100%;

      .stage-tip {
        height: 100%;
        color: var(--el-text-color-primary) !important;
        align-content: center;
        display: grid;
        text-align: center;
      }

      :deep(.el-col) {
        color: var(--el-color-primary);
        line-height: 100%;
      }

      :deep(.el-icon) {
        margin: 0 25px;
        font-size: 19px;
      }
    }

    .single-stage {
      text-align: center;
      height: 50%;

      :deep(.el-col) {
        //align-content: center;
        //display: grid;
        font-size: 12px;
        cursor: pointer;
      }
    }
  }

  .label-tips {
    font-size: 12px;
    width: 100px;
    margin-right: 10px;
    display: block;
    text-align: right;
  }

  .row-cell {
    margin-bottom: 18px;

    &:first-child {
      margin-top: 18px;
    }

    .label-data {
      font-size: 12px;
      margin-right: 5px;
    }
  }

  .page-content {
    padding: 10px;

    :deep(.el-form) {
      border: 1px solid var(--el-border-color-light);
      margin-top: 10px;

      .el-form-item__label {
        border-right: 1px solid var(--el-border-color-light);
        height: 34px !important;
        line-height: 34px;
      }

      .el-form-item__content {
        padding-left: 10px;
      }

      .el-table__cell {
        border-right: 1px solid var(--el-border-color-light);
        box-sizing: border-box;

        &:last-child {
          border-right: none;
        }
      }
    }
  }

  .action-card {
    margin-top: 10px;
    border-radius: 4px;
    border: 1px solid var(--el-border-color-extra-light);
    padding: 8px 10px;

    .title-item {
      display: flex;
      align-items: center;
      cursor: pointer;
      font-size: 12px;
      padding: 4px 6px;
      border-radius: 4px;
      border: 1px solid var(--el-color-primary-light-8);
      margin-left: 10px;

      span {
        line-height: 20px;
        display: inline-block;
        margin-left: 8px;
        color: var(--next-bg-menuBar-light-1);
      }

      .tips {
        font-weight: bold;
        color: var(--next-bg-menuBar-light-1);
        margin-left: 2px;
      }

      &:hover {
        background: var(--el-color-primary-light-8);

        .tips {
          color: var(--el-color-primary);
        }
      }
    }

    .action-cell {
      display: flex;
      align-items: center;
      margin-left: 100px;

      .action-top {
        display: flex;
        align-items: center;
        margin-right: 20px;
        font-size: 14px;

        .action-tips {
          margin-left: 5px;
        }
      }

      .action-data {
        font-weight: bold;
      }
    }
  }

  .action-popper {
    background: transparent !important;
    position: relative;

    &:after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--el-color-primary-light-9);
      opacity: .8;
      filter: grayscale(100%);
    }

    .el-popper__arrow::before {
      background: var(--el-color-primary-light-9) !important;
      opacity: .8;
      filter: grayscale(100%);
    }

    .sale-title {
      color: var(--el-text-color-primary);
    }
  }

  .card-item {
    :deep(.el-tag) {
      cursor: pointer;
    }

    .arrow {
      display: flex;
      align-items: center;
      height: 20px;
      transition: .2s;
      cursor: pointer;
      margin-top: 10px;
      color: var(--el-color-primary-light-6);
      font-size: 20px;

      &:hover {
        color: var(--el-color-primary);
      }
    }
  }

  .action-add-btn {
    margin: 0 1px;
    color: var(--el-color-primary);
    font-size: 30px;
    opacity: .5;
    position: absolute;
    top: 35%;
    left: 23.8%;
    width: 35px;

    &:hover {
      cursor: pointer;
      opacity: 1;
    }
  }

  .card-cell {
    .card-tips {
      margin-right: 5px;
    }

    .card-data {
      margin-top: 3px;
      cursor: pointer;

      &:hover {
        color: var(--el-color-primary);
      }
    }
  }

  .list-cell {
    display: flex;
    align-items: stretch;
    margin-top: 10px;

    .label-content {
      flex: 1;
      overflow: hidden;
      font-size: 13px;

      .label-data {
        font-size: 13px;
        line-height: 18px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        width: 190px;
        margin-top: 1px;
      }

      .label-all-data {
        overflow: unset;
        width: auto;
        text-overflow: unset;
        display: block;
      }
    }
  }

  .action-record-cell {
    padding: 18px 0;
    border-bottom: 1px dotted var(--el-border-color);

    &:last-child {
      border-bottom: none;
    }

    .label-time {
      margin-right: 10%;
      color: var(--el-color-info);
    }

    .label-data {
      flex: 1;
      overflow: hidden;
      margin-top: -2px;
    }
  }
}

.header-button {
  width: 100%;
  height: 100%;
  margin-bottom: 3px;

  :deep(.el-card__body) {
    padding: 15px;
  }

  .button-item {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 12px;
    padding: 4px 6px;
    border-radius: 4px;
    border: 1px solid var(--el-color-primary-light-8);
    margin-left: 25px;

    span {
      line-height: 20px;
      display: inline-block;
      margin-left: 8px;
      color: var(--next-bg-menuBar-light-1);
    }

    .tips {
      font-weight: bold;
      color: var(--next-bg-menuBar-light-1);
      margin-left: 2px;
    }

    &:hover {
      background: var(--el-color-primary-light-8);
    }
  }
}

.fixed-right {
  position: fixed;
  right: 20px;
  bottom: 10px;
  z-index: 999;

  .fixed-cell {
    background: var(--next-bg-topBar);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--el-color-primary);
    font-size: 20px;
    box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 0, rgba(0, 0, 0, 0.06) 0 1px 2px 0;
    margin-top: 10px;
  }
}
</style>
<style lang="scss">
.tabs-list {
  position: absolute;
  top: 90px;
  left: -50px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  overflow: auto;
  max-height: 100%;

  .close-btn {
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: var(--el-color-primary);
    padding: 10px 0;
    border-radius: 5px 0 0 5px;
  }
}

.purchase-detail {
  overflow: unset;
  position: fixed;
  background: var(--next-bg-main-color);
}
</style>
